<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/font/iconfont.css">
    <link rel="stylesheet" href="/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/order.css">
</head>

<body>
    <!-- 卡片区域 -->
    <div class="layui-card">

        <div class="layui-card-body">
            <form class="layui-form">
                <div class="box-l">
                    <i class="layui-icon layui-icon-search"></i>
                    <input type="text" name="order" required lay-verify="required" placeholder="请输入订单号"
                        class="layui-input">
                    <!-- <button class="layui-btn layui-btn-warm orderBtn">查询</button> -->
                </div>

                <div class="layui-inline">
                    <i class="layui-icon layui-icon-log"></i>
                    <input type="text" class="layui-input startTime" id="test1" placeholder="开始日期">
                    <span>至</span>
                    <input type="text" class="layui-input endTime" id="test1" placeholder="结束日期">
                </div>
                <button class="layui-btn layui-btn-warm">查询</button>
            </form>

            <!-- 订单列表区域 -->
            <table class="layui-table" border="1">
                <colgroup>
                    <col />
                    <col width="150" />
                    <col width="200" />
                    <col width="200" />
                    <col width="200" />
                    <col width="200" />
                    <col width="200" />
                    <col width="200" />
                </colgroup>

                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>订单状态</th>
                        <th>用户</th>
                        <th>手机号</th>
                        <th>地址</th>
                        <th>下单时间</th>
                        <th>实收金额</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

            <!-- 分页区域 -->
            <div id="pageBox"></div>
        </div>
    </div>
    <!-- 模态框模板结构 -->
    <script type="text/html" id="dialog-edit">

    </script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        {{each records}}
        <tr>
            <td>{{$value.id}}</td>
            {{if $value.status==2}}
            <td>正在派送</td>
            {{else if $value.status==3}}
            <td>已派送</td>
            {{else if $value.status==4}}
            <td>已完成</td>
            {{/if}}
            <td>{{$value.userName}}</td>
            <td>{{$value.phone}}</td>
            <td>{{$value.address}}</td>
            <td>{{$value.orderTime}}</td>
            <td>{{$value.amount}}</td>
            <td>
                {{if $value.status==4}}
                <a style="color:blue ;" href="javascript:;" class="look" data-value="{{$value}}">查看</a>
                {{else if $value.status==3}}
                <a style="color:blue ;" href="javascript:;" class="look" data-value="{{$value}}">查看</a>&nbsp;&nbsp;
                <a style="color:blue ;" href="javascript:;" class="status" data-id="{{$value.id}}" >完成</a>
                {{else if $value.status==2}}
                <a style="color:blue ;" href="javascript:;" class="look" data-value="{{$value}}">查看</a>&nbsp;&nbsp;
                <a style="color:blue ;" href="javascript:;" class="status" data-id="{{$value.id}}">派送</a>
                {{/if}}
            </td>
        </tr>
        {{/each}}
    </script>

    <!-- 导入JS  -->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/order.js"></script>

</body>

</html>